<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="7" :lg="11" :md="12" :sm="24">
            <a-form-item label="时间范围">
              <j-date
                placeholder="请选择开始日期"
                class="query-group-cust"
                v-model="customerReport.lastDateBegin"
              ></j-date>
              <span class="query-group-split-cust"></span>
              <j-date
                placeholder="请选择结束日期"
                class="query-group-cust"
                v-model="customerReport.lastDateEnd"
              ></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <role-datarule-modal ref="datarule"></role-datarule-modal>
    <div id="container"></div>
  </div>
</template>
<script src="https://webapi.amap.com/maps?v=2.0&key=1e949864d8ab94b240dccc1583ef70bb&plugin=AMap.Scale,AMap.ToolBar,AMap.DistrictLayer"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script>
import '@/assets/less/TableExpand.less'
import AMap from 'AMap'
import { getAction, postAction } from '@/api/manage'
import RoleDataruleModal from './modules/RoleDataruleModal.vue'
export default {
  name: 'maplist',
  components: {
    RoleDataruleModal,
  },
  data() {
    return {
      // 查询条件
      massMarks: [],
      massMarksList: [],
      beal: false,
      mass: null,
      customerReport: {},
      icon: require('../../assets/poi-marker-default.png'),
      map: null,
      disCountry: null,
      AMap: null,
      polygons: [],
      polygon: null,
      colors: {},
      marker: null,
      url: {
        getlist: '/customerReport/getList',
        getListCity: '/customerReport/getListCity',
      },
      GDPSpeed: {
        520000: 9, //贵州
        540000: 10, //西藏
        530000: 7.0, //云南
        500000: 8.5, //重庆
        360000: 7.5, //江西
        340000: 8.0, //安徽
        510000: 8.0, //四川
        350000: 8.5, //福建
        430000: 8.0, //湖南
        420000: 7.5, //湖北
        410000: 5.5, //河南
        330000: 7.0, //浙江
        640000: 7.5, //宁夏
        650000: 7.0, //新疆
        440000: 7.0, //广东
        370000: 7.0, //山东
        450000: 7.3, //广西
        630000: 7.0, //青海
        320000: 7.0, //江苏
        140000: 8.0, //山西 /
        460000: 7, // 海南
        310000: 6.5, //上海
        110000: 6.5, // 北京 /
        130000: 7.5, // 河北 /
        230000: 6, // 黑龙江
        220000: 6, // 吉林
        210000: 6.5, //辽宁
        150000: 6.5, //内蒙古
        120000: 5, // 天津
        620000: 6, // 甘肃
        610000: 8.5, // 甘肃
        710000: 2.64, //台湾
        810000: 3.0, //香港
        820000: 4.7, //澳门
      },
    }
  },
  created() {
    this.point()
  },
  methods: {
    getColorByDGP(adcode) {
      if (!this.colors[adcode]) {
        var gdp = this.GDPSpeed[adcode]
        if (!gdp) {
          this.colors[adcode] = 'rgb(227,227,227)'
        } else {
          var rg = 255 - Math.floor(((gdp - 5) / 5) * 255)
          this.colors[adcode] = 'rgb(' + rg + ',' + rg + ',255)'
        }
      }
      return this.colors[adcode]
    },
    initmap() {
      this.map = new AMap.Map('container', {
        zooms: [4, 10],
        zoom: 5, //级别
        isHotspot: false,
        defaultCursor: 'pointer',
        touchZoomCenter: 1,
        resizeEnable: true,
        center: [106.122082, 33.719192],
        features: ['bg', 'point', 'road', 'building'],
        pitch: 0,
        center: [116.397428, 39.90923], //中心点坐标
      })
      this.initPro()
    },
    initPro() {
      var _that = this
      _that.disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: 'CHN',
        depth: 0,
        styles: {
          'nation-stroke': '#22ffff',
          'coastline-stroke': [0.85, 0.63, 0.94, 1],
          'province-stroke': 'white',
          'city-stroke': 'rgba(255,255,255,0.15)', //中国特有字段
          fill: function (props) {
            //中国特有字段
            return _that.getColorByDGP(props.adcode)
          },
        },
      })
      _that.disCountry.setMap(_that.map)
      _that.point()
      _that.getCityPositon()
    },
    point() {
      var _that = this
      postAction(_that.url.getlist, _that.customerReport).then((res) => {
        if (res.success) {
          if (res.code == 200) {
            for (var i = 0, marker; i < res.result.length; i++) {
              var localtions = []
              localtions.push(res.result[i].x)
              localtions.push(res.result[i].y)
              var marker = new AMap.Marker({
                size: new AMap.Size(20, 20), //图标大小
                // offset: new AMap.Pixel(-13, -30),
                position: localtions,
                map: _that.map,
                resizeEnable: true,
                clickable: true,
              })
              marker.setLabel({
                offset: new AMap.Pixel(0, -28), //设置文本标注偏移量
                content:
                  '<span style="font-size:14px;border:none;">' +
                  res.result[i].name +
                  ':' +
                  res.result[i].sum +
                  '</span>', //设置文本标注内容
                direction: 'center', //设置文本标注方位
                resizeEnable: true,
              })
              marker.on('click', function (e) {
                _that.customerReport.x = e.target._position[0]
                _that.customerReport.y = e.target._position[1]
                _that.$refs.datarule.show1(_that.customerReport)
              })
            }
          } else {
            this.$message.success(res.message)
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getCityPositon() {
      var _that = this
      postAction(_that.url.getListCity, _that.customerReport).then((res) => {
        if (res.success) {
          if (res.code == 200) {
            for (var i = 0, massMarks; i < res.result.length; i++) {
              var localtions = []
              localtions.push(res.result[i].xx)
              localtions.push(res.result[i].yy)
              //设置样式
              var styleObject = {
                url: _that.icon, // 图标地址
                size: new AMap.Size(35, 35), // 图标大小
                anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
              }
              //设置坐标图
              for (var i = 0; i < res.result.length; i++) {
                var point = {
                  lnglat: [res.result[i].xx, res.result[i].yy],
                  name: [res.result[i].name],
                  sum: [res.result[i].sum],
                }
                _that.massMarks.push(point)
              }
              _that.mass = new AMap.MassMarks(_that.massMarks, {
                opacity: 0.9,
                zIndex: 111,
                cursor: 'pointer',
                style: styleObject,
              })
              _that.mass.setMap(_that.map)
              //设置lable
              var marker = new AMap.Marker({ content: '', map: _that.map })
              _that.mass.on('mouseover', function (e) {
                marker.show()
                marker.setPosition(e.data.lnglat)
                marker.setLabel({ content: e.data.name + ':' + e.data.sum },{direction: 'center'})
              })
              _that.massMarksList.push(marker)
              _that.mass.on('mouseout', function (e) {
                marker.hide()
              })
              //点击事件
              _that.mass.on('click', function (e) {
                _that.customerReport.xx = e.data.lnglat[0]
                _that.customerReport.yy = e.data.lnglat[1]
                _that.$refs.datarule.show2(_that.customerReport)
              })
            }
            this.mass.hide()
          } else {
            this.$message.success(res.message)
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    // 滚轮事件触发
    mapZoomend() {
      var zoom = this.map.getZoom() //获取当前地图级别
      if (zoom >= 6.3) {
        this.mass.show()
        this.disCountry.hide()
        this.beal = true
      } else {
        this.mass.hide()
        this.disCountry.show()
      }
    },
    removeMarkers() {
      this.map.remove(this.massMarksList)
    },
    // 事件绑定
    zoomOn() {
      this.map.on('zoomend', this.mapZoomend)
    },
    // 解绑事件
    zoomOff() {
      this.map.off('zoomend', this.mapZoomend)
    },
    searchQuery() {
      this.massMarks = []
      this.massMarksList = []
      this.beal = false
      this.mass = null
      this.disCountry = null
      this.polygons = []
      this.polygon = null
      this.colors = {}
      this.map.destroy()
      this.initmap()
      this.zoomOn()

      // if(this.beal){
      //   this.mass.clear()
      //   }
      // this.point()
      // this.getCityPositon()
    },
    searchReset() {
      this.customerReport = {}
      this.initmap()
      this.zoomOn()
    },
  },
  mounted() {
    this.initmap()
    this.zoomOn()
  },
}
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 1000px;
}
#container .amap-marker-label {
  border: 0 none;
  background-color: #fff;
  white-space: nowrap;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
#container .amap-marker-label:after {
  position: absolute;
  border: 5px solid transparent;
  border-top-color: #fff;
  top: 19px;
  left: 43%;
  content: '';
  width: 0;
  height: 0;
}
</style>